<template>
  <div id="playerBar" ref="playerBar">
    <div>
      <!-- 歌曲封面 -->

      <img
        id="playerBarImg"
        ref="playerBarImg"
        :src="barImgUrl"
        @error="setDefaultBarImage"
        @click="openWindow('PlayLyrics')"
        style="box-shadow: #a0a0a0 0px 0px 5px 0px"
        alt=""
      />

      <!-- 标题+控制按钮 -->
      <div id="playerBarControl">
        <img
          class="playerBarControlBackground"
          :style="{ 'background-image': 'url(' + barImgUrl + ')' }"
        />
        <div>
          <!-- @click="openWindow('BlackList')" -->
          <div
            
            ref="barTitle"
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              flex-grow: 1;
              margin-left: 5%;
              overflow: hidden;
              white-space: nowrap;
              margin-right: 5%;
              overflow: hidden;
              font-size: 0.8rem;
              width: calc(100% - 6rem);
            "
          >
            <van-swipe
              :loop="true"
              :show-indicators="false"
              @change="playSwipeChange"
            >
              <van-swipe-item
                v-for="(item, index) in play_swipe_switch_page"
                :key="index"
              >
                <template v-if="play_swipe_now_index != item">
                  {{ barListTitle[item] }}
                </template>
                <template
                  v-else-if="
                    $refs.barTitle &&
                    $refs.barTitle.clientWidth >
                      bar_title.length * single_char_width
                  "
                >
                  {{ bar_title }}
                </template>
                <template v-else>
                  <marquee scrollamount="4">{{ bar_title }}</marquee>
                </template>
              </van-swipe-item>
            </van-swipe>
          </div>
          <div style="width: 1.5em; margin-right: 0.5em">
            <!-- <div style="padding-top: 8px; height: 40px"> -->
            <div
              ref="cir"
              class="circle playerBar_btn_vsg_box"
              @click="changePlayBackStatus"
            >
              <svg viewBox="0 0 104 104">
                <path
                  style="fill: none; stroke: #d4d4d4; stroke-width: 4px"
                  d="M 52 52 m 0 -50 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"
                ></path>
                <path
                  style="
                    fill: none;
                    stroke: white;
                    stroke-width: 6px;
                    stroke-linecap: round;
                    stroke-dasharray: 105px, 314px;
                  "
                  ref="playProgreff"
                  d="M 52 52 m 0 -44 a 44 44 0 1 1 0 88 a 44 44 0 1 1 0 -88"
                ></path>

                <line
                  x1="42"
                  y1="35"
                  x2="42"
                  y2="60"
                  style="stroke: white; stroke-width: 7"
                  v-if="playBackStatus"
                />
                <line
                  v-if="playBackStatus"
                  x1="58"
                  y1="35"
                  x2="58"
                  y2="60"
                  style="stroke: white; stroke-width: 7"
                />

                <polygon
                  v-if="!playBackStatus"
                  points="40,35 70,50 40,65"
                  style="fill: white; stroken: white; stroken-width: 1"
                />
              </svg>
              <!-- <div class="progressText"></div> -->
            </div>
            <!-- </div> -->
          </div>
          <div
            ref="songMenuBtn"
            style="width: 1.5em; margin-right: 1em"
            @click="openSongMenuWindow"
          >
            <div ref="cir" class="circle playerBar_btn_vsg_box">
              <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <line
                  x1="30"
                  y1="30"
                  x2="80"
                  y2="30"
                  style="stroke: white; stroke-width: 5"
                />
                <line
                  x1="30"
                  y1="50"
                  x2="80"
                  y2="50"
                  style="stroke: white; stroke-width: 5"
                />
                <line
                  x1="30"
                  y1="70"
                  x2="80"
                  y2="70"
                  style="stroke: white; stroke-width: 5"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PlayList v-if="show_list" @hook:destroyed="listDestory()" />
    <!-- <PageTaraget v-if="openPage!=''" :targetName='openPage' @hook:destroyed="openPage=''" :propData="targetData" style="margin-left:-5vw"/> -->
  </div>
</template>
<style scoped>
.playerBarControlBackground {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* background: url(http://p3.music.126.net/hti_a0LADoFMBHvOBwAtRA==/1369991500930171.jpg); */
  z-index: -1;
  border-radius: 25px;
  filter: blur(1px);
  transform: scale(1.8);
  transition: all 0.6s;
  /* margin-left: -10px; */
  /* margin-top: -10px; */
  margin: -1px -1px;
  background-blend-mode: multiply;
  background-color: rgb(179, 175, 175);
}
.playerBar_btn_vsg_box {
  padding-top: 0.6em;
  height: 2em;
}
#playerBar {
  position: fixed;
  bottom: 60px;
  left: 5vw;
  z-index: 2;
}
#playerBarImg {
  width: 3rem;
  height: 3rem;
  border-radius: 5px;
  /* display: inline-block; */
  z-index: 1;
  position: relative;
  /* margin-bottom: -1rem; */
  /* position:absolute */
  /* float: left; */
}
#playerBarControl > div {
  display: flex;
  flex-direction: row;
}
#playerBarControl {
  /* position:absolute; */
  background: #235;
  filter: blur(0.1px);
  width: calc(80vw - 25px);
  line-height: 1.5em;
  display: inline-block;
  border-radius: 25px;
  /* float:left; */
  margin-left: -25px;
  padding-left: 25px;
  margin-bottom: 2px;
  color: white;
  font-size: 14px;
  overflow: hidden;
  /* margin-top: 15 px; */
}
</style>

<script>
import PlayList from "@/components/wl/PlayList.vue";
// import {blurImg} from '@/common/stackblur'
// import { create } from "@/common/commonUtils";
// import PageTaraget from "@/components/wl/pageTaraget.vue";

export default {
  name: "musicPlayerBar",
  components: {
    PlayList,
    // PageTaraget
  },
  data() {
    return {
      barImgUrl: "",
      playBackStatus: false,
      bar_title: "云村播放器，发现好音乐",
      bar_lyric: "",
      default: {
        bar_title: "云村播放器，发现好音乐",
        bar_img:
          "https://btn-1251503204.cos.ap-chengdu.myqcloud.com/109951167577184184.jpg",
      },
      show_list: false,

      single_char_width: 0,

      barListTitle: ["", "", ""],
      play_swipe_switch_page: [0, 1, 2],
      play_swipe_now_index: 0,
      // openPage:"",
      // targetData:{},
    };
  },
  methods: {
    changePlayBackStatus() {
      this.$store.dispatch("serviceSetPlayerState", {
        val: !this.playBackStatus,
      });
    },
    debug_function() {},
    event_playBackStatus(data) {
      //data 真表示正在播放，假为暂停
      this.playBackStatus = data;
      let mte = this.$store.state.playerState.playData.music_title;
      let mts = this.$store.state.playerState.playData.music_singer;
      //   console.log(lrc, mte, data);
      if (!data || this.bar_lyric == "") {
        if (mte == "") {
          this.bar_title = this.default.bar_title;
        } else {
          this.bar_title = mts + " - " + mte;
        }
      } else {
        this.bar_title = this.bar_lyric;
      }
      // console.log("event_playBackStatus", data);
    },
    event_playTime(data) {
      let atme = this.$store.state.playerState.playData.music_duration_time;
      let pecent = 0;
      try {
        pecent = data / atme;
      } catch (e) {
        pecent = 0;
      }
      this.$refs.playProgreff.style["stroke-dasharray"] =
        parseInt(pecent * 314) + "px, 314px";
      // this.$refs.playerBarImg.src=this.barImgUrl;
      let t =
        this.$store.state.DataCacheMap.simpleData[
          this.$store.state.playerState.playData.songId
        ];
      if (t && t["headUrl"]) {
        t = t["headUrl"];
        this.barImgUrl = t;
      }
    },
    event_playLyric(data) {
      this.bar_lyric = data;
      if (data == "" || data == null) {
        let mte = this.$store.state.playerState.playData.music_title;
        let mts = this.$store.state.playerState.playData.music_singer;
        this.bar_title = mts + " - " + mte;
      } else {
        this.bar_title = data;
      }
    },
    event_updatePlaySwipeTitle() {
      let calc = (index, count) => (index + count) % count;
      let getInfo = (data) => data["singer"] + " - " + data["title"];
      let store = this.$store.state;
      let playNowList = store.playList.playNowList;
      let i = playNowList.indexOf(store.playerState.playData.songId);
      if (i == -1) {
        i == 0;
      }
      let pos_prev = calc(i - 1, playNowList.length);
      let pos_next = calc(i + 1, playNowList.length);
      let songId_prev = playNowList[pos_prev];
      let songId_next = playNowList[pos_next];
      let songInfo_prev = store.DataCacheMap.simpleData[songId_prev];
      let songInfo_next = store.DataCacheMap.simpleData[songId_next];
      this.barListTitle[calc(this.play_swipe_now_index - 1, 3)] =
        getInfo(songInfo_prev);
      this.barListTitle[calc(this.play_swipe_now_index + 1, 3)] =
        getInfo(songInfo_next);
      console.log(
        "上一首信息",
        getInfo(songInfo_prev),
        "下一首信息",
        getInfo(songInfo_next)
      );
      // this.play_swipe_switch_page[calc(this.play_swipe_now_index-1)]=
    },
    setDefaultBarImage(e) {
      e.target.src = this.default.bar_img;
    },
    openSongMenuWindow() {
      this.show_list = true;
    },
    openWindow(name) {
      this.$EventBus.$emit("openTargetWindow", { o: name });
      // this.openPage=name;
      // create(PageTaraget, { targetName });
    },
    listDestory() {
      // console.log("close啦");
      this.show_list = false;
    },
    // 歌名滑动切换歌曲
    playSwipeChange(index) {
      // action = 0 //上一首
      // action = 1 //下一首
      let action;
      if (this.play_swipe_now_index == 0 && index > 1) {
        action = 0;
      } else if (index == 0 && this.play_swipe_now_index > 1) {
        action = 1;
      } else if (this.play_swipe_now_index < index) {
        action = 1;
      } else {
        action = 0;
      }
      if (action == 1) {
        this.$store.dispatch("serviceSetPlayAction", "next");
      } else {
        this.$store.dispatch("serviceSetPlayAction", "prev");
      }
      this.play_swipe_now_index = index;
      this.event_updatePlaySwipeTitle();
    },
  },
  computed: {
    servicePlayBackStatus() {
      return this.$store.state.playerState.playBackStatus; //需要监听的数据
    },
    servicePlayTime() {
      return this.$store.state.playerState.playData.music_now_play_time; //需要监听的数据
    },
    serviceLyricSync() {
      return this.$store.state.playerState.playData.lrc_now_line_str; //需要监听的数据
    },
  },
  watch: {
    servicePlayBackStatus(newVal) {
      //   console.log("数据发生变化啦"); //修改数据时，看不到该输出结果，因为无法监听到数据的变化
      //   console.log(newVal, oldVal);
      // console.log("播放状态以改变！");
      this.event_playBackStatus(newVal);
    },
    servicePlayTime(newVal) {
      this.event_playTime(newVal);
    },
    serviceLyricSync(newval) {
      this.event_playLyric(newval);
    },
  },
  mounted() {
    window.that = this;
    this.barImgUrl = this.default.bar_img;
    // 同步一下播放器的信息
    this.event_playTime(
      this.$store.state.playerState.playData.music_now_play_time
    );
    this.playBackStatus = this.$store.state.playerState.playBackStatus;
    if (this.playBackStatus) {
      this.event_playLyric(
        this.$store.state.playerState.playData.lrc_now_line_str
      );
    }
    this.single_char_width =
      parseInt((this.$refs.songMenuBtn.clientWidth / 1.5) * 0.8) + 1;

    // 更新左右翻动的标题
    this.event_updatePlaySwipeTitle();
    // console.log(m1px,"高度");
  },
};
</script>
